<template>
  <div :class="!$store.state.collapsed ? 'sidebar' : 'sidebar sidebar-small'">
    <a-menu
      style="height: 100%"
      :default-selected-keys="selectedUrl"
      :selectedKeys="selectedUrl"
      :open-keys.sync="openKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      @select="handleSelect"
      @openChange="onOpenChange"
    >
      <a-menu-item :disabled="true" style="opacity: 1 !important">
        <div class="logo">后台管理</div>
      </a-menu-item>

      <template v-for="item in menuList">
        <a-menu-item
          v-if="!item.children"
          :key="item.url"
          @click="handleClick(item.title)"
        >
    
          <!-- <a-icon :type="item.icon" /> -->
               <span class="iconfont" v-html="item.Icon"></span>
          <span>{{ item.title }}</span>
        </a-menu-item>
        <a-sub-menu v-else :key="item.url">
          <span slot="title"
            >
            <!-- <a-icon :type="item.icon" /> -->
               <span class="iconfont" v-html="item.Icon"></span>
            
            <span>{{ item.title }}</span></span
          >
          <a-menu-item
            v-for="it in item.children"
            :key="it.url"
            @click="handleClick(it.title)"
            >{{ it.title }}</a-menu-item
          >
        </a-sub-menu>
      </template>
    </a-menu>
    <div style="height: 68px">
      <a-icon
        style="
          position: absolute;
          bottom: 24px;
          right: 24px;
          font-size: 20px;
          color: #b5b4b4 !important;
        "
        @click="toggleCollapsed"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
      />
    </div>
  </div>
</template>

<script>
import { asideMenus } from "../http/api";
export default {
  data() {
    return {
      collapsed: false,
      menuList: [
        {
          code: null,
          // icon: "home",
          Icon:'&#xe601;',
          id: "4daaa9ae-6dbb-49b4-9dd5-9cb40e880e08",
          ifChoose: "0",
          method: null,
          title: "主页",
          name: "主页",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/mainPage",
        },

        {
          code: null,
          // icon: "zhiwei",
          // icon: require('../assets/images/position1.png'),
          //  icon: require('../assets/images/404.jpg'),
          // img:'&#xe7bd;',
          Icon:'&#xe7bd;',
          id: "zhiwei",
          ifChoose: "0",
          method: null,
          title: "职位模块",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/business",
          children: [
            {
              code: null,
              icon: "container",
              id: "1",
              ifChoose: "0",
              method: null,
              title: "职位管理",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/business",
            },
            {
              code: null,
              icon: "appstore",
              id: "3",
              ifChoose: "0",
              method: null,
              title: "求职信息模块",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/JobInformation",
            },
          ],
        },

        {
          code: null,
          // icon: "carry-out",
          Icon:'&#xe65b;',
          id: "2",
          ifChoose: "0",
          method: null,
          title: "标签库管理",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/label",
        },
        {
          code: null,
          // icon: "control",
          Icon:'&#xe8b0;',
          id: "3.1",
          ifChoose: "0",
          method: null,
          title: "话题模块",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/TopicPoint",
        },

        {
          code: null,
          // icon: "message",
          Icon:'&#xe600;',
          id: "4",
          ifChoose: "0",
          method: null,
          title: "微信账号模块",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/WechatAccount",
        },
    {
          code: null,
          icon: "user-add",
          id: "qiye",
          Icon:'&#xe894;',
          ifChoose: "0",
          method: null,
          title: "企业展示模块",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/enterprise",
          children: [
            {
              code: null,
              icon: "container",
              id: "qiyezhanshi",
              ifChoose: "0",
              method: null,
              title: "企业展示管理",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/enterprise",
            },
          ],
        },

        {
          code: null,
          // icon: "user-add",
          Icon:'&#xe67d;',
          id: "chuangye",
          ifChoose: "0",
          method: null,
          title: "创业模块",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/Entrepreneur",
          children: [
            {
              code: null,
              icon: "container",
              id: "chuangyezhe",
              ifChoose: "0",
              method: null,
              title: "创业者模块",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/Entrepreneur",
            },
            {
              code: null,
              icon: "container",
              id: "chuangyerongzi",
              ifChoose: "0",
              method: null,
              title: "创业与融资模块",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/VentureFinancing",
            },
          ],
        },

        {
          code: null,
          // icon: "user-add",
          id: "touziren",
          Icon:'&#xe6fa;',
          ifChoose: "0",
          method: null,
          title: "投资人模块",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/investor",
          children: [
            {
              code: null,
              icon: "container",
              id: "touzirenguanli",
              ifChoose: "0",
              method: null,
              title: "投资人管理",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/investor",
            },
          ],
        },

{
          code: null,
          // icon: "user-add",
          Icon:'&#xe6c0;',
          id: "offer",
          ifChoose: "0",
          method: null,
          title: "offer比较模块",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/offer",
          children: [
            {
              code: null,
              icon: "container",
              id: "offermokuai",
              ifChoose: "0",
              method: null,
              title: "offer比较管理",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/offer",
            },
          ],
        },

        {
          code: null,
          // icon: "user-add",
          Icon:'&#xe63a;',
          id: "5",
          ifChoose: "0",
          method: null,
          title: "基础管理",
          orderNum: 1,
          parentId: "-1",
          perms: null,
          type: "目录",
          url: "/privacytreaty",
          children: [
            {
              code: null,
              icon: "container",
              id: "6",
              ifChoose: "0",
              method: null,
              title: "个人隐私管理",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/privacytreaty",
            },
            {
              code: null,
              icon: "container",
              id: "7",
              ifChoose: "0",
              method: null,
              title: "免责管理",
              orderNum: 1,
              parentId: "-1",
              perms: null,
              type: "目录",
              url: "/Exemption",
            },
          ],
        },
      ],
      openKeys: [""],
      rootSubmenuKeys: [],
      selectedUrl: [this.$route.path],
    };
  },
  mounted() {
    // this.getMenus()
    this.selectedUrl = [this.$route.path];
    for (var i = 0; i < this.menuList.length; i++) {
      if (this.menuList[i].children) {
        for (var j = 0; j < this.menuList[i].children.length; j++) {
          if (this.menuList[i].children[j].url == this.$route.path) {
            this.openKeys = [this.menuList[i].url];
          }
        }
      }
    }
  },
  methods: {
    //递归
    recursion(data, current) {
      var result = null;
      if (!data) {
        return;
      }
      for (var i = 0; i < data.length; i++) {
        if (result !== null) {
          break;
        }
        var item = data[i];
        if (item.url == current) {
          result = item.title;
          break;
        } else if (item.children && item.children.length > 0) {
          result = this.recursion(item.children, current);
        }
      }
      return result;
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      this.$store.commit("saveCollapsed", this.collapsed);
    },
    handleSelect({ item, key, selectedKeys }) {
      this.$router.push(key);
    },
    handleClick(title) {
      this.$store.commit("savetitle", title);
    },
    getMenus() {
      asideMenus()
        .then((res) => {
          if (res.data.code === 0) {
            this.ropenKeysootSubmenuKeys = [];
            this.menuList = res.data.data.menus;
            for (var i = 0; i < this.menuList.length; i++) {
              this.rootSubmenuKeys.push(this.menuList[i].url);
            }
            var obj = this.recursion(this.menuList, this.$route.path);
            this.$store.commit("savetitle", obj);
          }
        })
        .catch(() => {});
    },
  },
  watch: {
    "$route.path"() {
      this.selectedUrl = [this.$route.path];
      var obj = this.recursion(this.menuList, this.$route.path);
      this.$store.commit("savetitle", obj);
      this.selectedUrl = [this.$route.path];
    for (var i = 0; i < this.menuList.length; i++) {
      if (this.menuList[i].children) {
        for (var j = 0; j < this.menuList[i].children.length; j++) {
          if (this.menuList[i].children[j].url == this.$route.path) {
            this.openKeys = [this.menuList[i].url];
          }
        }
      }
    }
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 208px;
  min-height: 100vh;
  transition: width 0.4s;
  position: relative;
}
.sidebar-small {
  width: 80px;
  transition: width 0.2s;
}
.ant-menu,
.ant-menu-item {
  transition: all 0.2s;
}
.sidebar ul {
  background-color: #000d37;
  border-right-color: #000d37;
}
.logo {
  line-height: 48px;
  height: 48px;
  width: 100%;
  color: #fff;
  font-size: 15px;
  background: #021176;
  display: flex;
  justify-content: center;
}
.ant-menu {
  color: #7f87a3;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #2e53c8;
}
.ant-menu-item-selected {
  color: #fff;
}
.ant-menu-item:hover,
.ant-menu-item-active {
  color: #fff;
}
.ant-menu-item:active {
  background-color: #000d37;
}
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
  display: none;
}
.ant-menu-item-disabled {
  cursor: auto;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ant-menu-inline-collapsed > .ant-menu-item-disabled {
  padding: 0 !important;
}
.iconfont{
      margin-right: 14px;
}
</style>
